<template>
    <div>
        <h3>{{ title }}学生</h3>
        <div>
            <label>学生姓名：<input type="text" v-model.lazy="studentItem.name"></label>
        </div>
        <div>
            <label>学生年龄：<input type="text" v-model.lazy="studentItem.age"></label>
        </div>
        <div>
            <button @click="onOk">确认{{ title }}</button>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

// const {updateStudent} = defineProps({
//     updateStudent:{
//         type:Object,
//         default(){
//             return {}
//         }
//     }
// })
const prop = defineProps(['updateStudent'])

const emit = defineEmits(['onAddStudent','onUpdateStudent'])
const studentItem = ref({})

const title = computed(()=>{
    if(studentItem.value.id){
        return '修改'
    }
    return '新增'
})

watch(()=>prop.updateStudent,()=>{
    studentItem.value=prop.updateStudent;
})

function onOk(){
    if(studentItem.value.id){
        //修改
        emit('onUpdateStudent',studentItem.value)
    }
    else{
        emit('onAddStudent',studentItem.value)
    }
}
</script>

<style scoped>

</style>